<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Layout - Puppertino Framework</title>
    <link
      href="https://fonts.googleapis.com/css?family=Inter:wght@100;400;900&display=swap"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/flexboxgrid@6.3.1/dist/flexboxgrid.min.css"
    />
    <link rel="stylesheet" type="text/css" href="../dist/css/full.css" />
    <link rel="stylesheet" type="text/css" href="../dist/css/layout.css" />
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <link rel="stylesheet" type="text/css" href="doc.css" />
    <meta
      name="description"
      content="This is the documentation for Icons on the Puppertino Framework, a framework that mimics Apple's design, woof!"
    />
    <link rel="icon" type="image/png" href="../landing-images/doggo.png" />
  </head>
  <body class="p-layout">
    <div class="route">
      <a
        href="https://codedgar.github.io/Puppertino/"
        class="p-btn p-btn-scope p-btn-scope-unactive"
        >Puppertino</a
      >
      <p>/</p>
      <a href="index.html" class="p-btn p-btn-scope p-btn-scope-unactive"
        >Examples</a
      >
      <p>/</p>
      <a href="layout.html" class="p-btn p-btn-scope">Layout</a>
    </div>
    <h1>Layout</h1>
    <div class="master">
      <p>
        Text is the motor of websites and apps. Without them there would be no
        actual usage for them. So in Puppertino we created a font sizing to rule
        them all. Puppertino includes a base font called <strong>Inter</strong>.
        We also have included a curated list of font sizes. You can use the
        layout component using the
        <a
          href="https://github.com/codedgar/Puppertino/blob/master/dist/css/layout.css"
          target="_blank"
          >CSS of Layout</a
        >
        or
        <a
          href="https://github.com/codedgar/Puppertino/blob/master/dist/css/full.css"
          target="_blank"
          >dowloading the full CSS</a
        >
        (Not recommended if you are just going to use this component).
      </p>

      <div class="talk-about-it">
        <div class="row middle-xs around-xs">
          <div class="col-xs-9 col-md-4">
            <h1 class="p-large-title">Aa<br />Inter</h1>
          </div>

          <div class="col-xs-9 col-md-4">
            <p>
              The font is defined in every CSS that exists as a root variable
              called <code class="code">--font</code> and it can be easily
              changed for whatever font you are using.
            </p>
          </div>
        </div>
      </div>

      <div class="talk-about-it">
        <h2>Layout.</h2>

        <p>
          We have included a curated list of font sizes for you to use based on
          human guidelines and transformed into <strong>rem</strong> for
          accesibility. You can use all of these font sizes just by adding the
          <code class="code">p-layout</code> class to your body tag. And it
          looks like this:
        </p>

        <h1>Title 1 (h1)</h1>
        <h2>Title 2 (h2)</h2>
        <h3>Title 3 (h3)</h3>
        <p>Content (p)</p>
      </div>

      <div class="talk-about-it">
        <h2>Other classes.</h2>

        <p>
          There also are other classes that feature other optional sizes. These
          sizes can come in handy in other types of scenarios.
        </p>

        <h1 class="p-large-title">Large Title (p-large-title)</h1>
        <h3 class="p-headline">Title 3 (p-headline)</h3>
        <p class="p-callout">Callout (p-callout)</p>
        <p class="p-subhead">Subhead (p-subhead)</p>
        <p class="p-footnote">Footnote (p-footnote)</p>
        <p class="p-caption">Caption (p-caption)</p>
      </div>
    </div>
  </body>
</html>
